<template>
	<view class="br10" style="width: 260rpx; position: relative" :style="{ width: width, background: !customUrl ? backColor : null }" :key="maxCount">
		<uv-upload
			:width="customUrl ? 130 : 80"
			:height="customUrl ? 70 : 80"
			:fileList="fileList"
			multiple
			:maxCount="maxCount"
			@afterRead="afterRead"
			:previewFullImage="false"
			@delete="deletePic"
			:deletable="!readonly"
		>
			<image mode="widthFix" v-if="customUrl" :src="customUrl" style="width: 260rpx; height: 140rpx"></image>
			<uv-icon v-if="!customUrl" name="photo" size="30" class="mtb20"></uv-icon>
		</uv-upload>
		<view class="cardUnit aboult" style="color: #fff" v-if="fileList.length == 0">
			{{ tips }}
		</view>
	</view>
</template>

<script>
import { toRaw } from 'vue';

export default {
	props: {
		customUrl: {
			type: String,
			default: null
		},
		width: {
			type: String,
			default: '100%'
		},
		tips: {
			type: String,
			default: '上传图片'
		},
		url: {
			type: String,
			default: ''
		},
		uploadType: {
			type: String,
			default: 'image'
		},
		maxSize: {
			type: Number,
			default: 1024
		},
		backColor: {
			type: String,
			default: 'var(--themeDefultBackground)'
		},
		maxCount: {
			type: Number,
			default: 1
		},
		readonly: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: Array, // 假设上传的是一个文件数组
			default: () => []
		}
	},
	name: 'uploadView',
	data() {
		return {
			fileList: []
		};
	},
	watch: {
		modelValue(newValue) {
			this.fileList = newValue;
		},
		maxCount(newValue) {
			console.log('maxCount:', newValue);
		}
	},
	methods: {
		// 删除图片
		deletePic(event) {
			if (!this.readonly) {
				this.fileList.splice(event.index, 1);
			}
		},
		// 新增图片
		async afterRead(event) {
			if (this.readonly) return; // 如果 readonly 为 true，则不执行上传逻辑

			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this.fileList.length;
			lists.map((item) => {
				this.fileList.push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this.fileList[fileListLen];
				this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				console.log(' this.fileList:', this.fileList);
				this.$emit('update:modelValue', this.fileList);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.1.6:8088/common/upload',
					filePath: url,
					name: 'file',
					formData: {},
					success: (res) => {
						setTimeout(() => {
							console.log('res:', res);
							let resData = res.data;
							if (typeof resData === 'string') {
								resData = JSON.parse(resData);
							}
							if (resData.code === 200) {
								resolve(resData.url);
							} else {
								reject(new Error(resData.msg || '上传失败'));
							}
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.aboult {
	position: absolute;
	width: 260rpx;
	height: 100%;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
	font-size: 24rpx;
	z-index: 99;
	pointer-events: none;
}
</style>
